<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-10 18:28:38
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-04-11 13:46:34
 * @FilePath: \ant-design-vue-jeecg-master\src\views\situationDisplay\modules\SXZY.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="windowInfo">
      <div class="windowInfo-head">
        <h3>设备状态显示</h3>
        <div class="keyBox">
          <div class="WPZ">故障</div>
          <div class="JL">正常</div>
        </div>
      </div>
      <div class="windowInfo-body">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="卫星">
            <a-table :columns="columns" :data-source="data" :pagination="false"> </a-table
          ></a-tab-pane>
          <a-tab-pane key="2" tab="指控车" force-render>
            <a-table :columns="columns" :data-source="data1" :pagination="false"> </a-table
          ></a-tab-pane>
          <a-tab-pane key="3" tab="导弹">
            <a-table :columns="columns" :data-source="data2" :pagination="false"> </a-table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        customRender: function (text) {
          if (text == 0) {
            return '故障'
          } else if (text == 1) {
            return '正常'
          }
        },
      },
    ]
    return {
      columns,
      data: [{ name: '卫星', status: 1 }],
      data1: [
        { name: '车1', status: 0 },
        { name: '车2', status: 1 },
      ],
      data2: [{ name: '弹1', status: 1 }],
      statusList1: [
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 1 },
        { status: 1 },
        { status: 1 },
      ],
    }
  },
  methods: {
    filter(val) {
      if (val == 0) {
        return '故障'
      } else if (val == 1) {
        return '正常'
      }
    },
  },
}
</script>

<style lang="less" scoped>
.tableContainer {
  width: 202px;
  display: flex;
  border: solid 0.1px rgb(87, 217, 249);
  flex-wrap: wrap;
  margin: 0 auto;
  .tableItem {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border: solid 0.1px rgb(87, 217, 249);
  }
}
.keyBox {
  // background: rgb(252, 249, 249);
  position: absolute;
  left: 45%;
  margin: auto;
  top: 15px;
  line-height: 32px;
  color: #fff;
  height: auto;
  display: flex;
  border-radius: 15px;
  padding: 5px;
  div {
    padding: 0 2px;
  }

  .WPZ {
    line-height: 15px;
    margin-right: 10px;
    &::before {
      display: inline-block;
      content: '';
      width: 15px;
      height: 15px;
      background: red;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  .JL {
    line-height: 15px;
    &::before {
      display: inline-block;
      content: '';
      width: 15px;
      height: 15px;
      background: rgb(108, 245, 108);
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  // .WJL {
  //   background: rgb(230, 215, 19);
  // }
  // .JL {
  //   background: rgb(80, 226, 60);
  // }
  // .DX {
  //   background: rgb(119, 118, 118);
  // }
}
.windowInfo {
  min-width: 300px;
  h3 {
    color: rgb(87, 217, 249);
  }
  color: #fff;
  padding: 10px;
  background: rgba(30, 36, 50, 0.6) !important;
  .windowInfo-head {
    display: flex;
  }
}
/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}
.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>
<style lang="less">
.windowInfo .ant-tabs-nav .ant-tabs-tab {
  color: #fff !important;
}
</style>
